<template>
  <el-amap
    class="amap-box"
    :vid="vid"
    :center="center"
    :zooms="[3, 18]"
    mapStyle="fresh"
  >
    <template v-if="markers && markers.length">
        <el-amap-marker
          v-for="marker in markers"
          :key="marker.position.toString()"
          :position="marker.position"
        />
    </template>
  </el-amap>
</template>

<script>
/**
 * 地图api说明
 * center: 地图中心点坐标值 eg: [118.6943582, 31.9441098]
 * zooms: 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
 * mapStyle: normal（默认样式）、dark（深色样式）、light（浅色样式）、fresh(osm清新风格样式)
 */

export default {
  props: {
    vid: {
      type: String,
      default: 'amap-vue',
    },
    markers: {
      type: Array,
      default: () => []
    },
    center: {
      type: Array,
      default: () => []
    },
  },
  name: 'VueAmap',
}
</script>

<style scoped lang="scss">
.amap-box{
  height: 100%;
  border: 1px solid #ddd;
}
</style>
